<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="22">
              <el-input
                v-model="listPram.companyName"
                placeholder="请输入名称"
                clearable
                size="small"
                style="width: 400px;"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  size="small"
                  @click="handlerSearch"
                />
              </el-input>
            </el-col>
            <el-col :span="2">
              <el-button class="text-right" type="primary" @click="addShop"
                >添加供应商</el-button
              >
            </el-col>
          </el-row>
        </div>
      </div>
      <el-table :data="listData.list" style="width: 100%" v-loading="loading">
        <el-table-column prop="companyName" label="公司名称"> </el-table-column>
        <el-table-column prop="bankName" label="开户银行"> </el-table-column>
        <el-table-column prop="bankBranch" label="开户支行"> </el-table-column>
        <el-table-column prop="accountName" label="账户名"> </el-table-column>
        <el-table-column prop="bankAccount" label="银行账号"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click="handleDelete(scope.row)"
              type="danger"
              size="small"
              >删除</el-button
            >
            <el-button type="primary" @click="editShop(scope.row)" size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="listPram.page"
        :page-sizes="constants.page.limit"
        :layout="constants.page.layout"
        :total="listData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog
      :title="editDialogConfig.title"
      :visible.sync="editDialogConfig.visible"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
        @submit.native.prevent
      >
        <el-form-item label="公司名称：">
          <el-input
            v-model="ruleForm.companyName"
            maxlength="40"
            placeholder="请输入名称"
            class="dialogWidth"
          ></el-input>
        </el-form-item>
        <el-form-item label="简介：">
          <el-input
            v-model="ruleForm.description"
            maxlength="100"
            placeholder="请输入简介"
            class="dialogWidth"
          ></el-input>
        </el-form-item>
        <el-form-item label="开户银行：">
          <el-input
            v-model="ruleForm.bankName"
            placeholder="请输入开户银行"
            class="dialogWidth"
          ></el-input>
        </el-form-item>
        <el-form-item label="开户支行：">
          <el-input
            v-model="ruleForm.bankBranch"
            maxlength="11"
            placeholder="请输入开户支行"
            class="dialogWidth"
          ></el-input>
        </el-form-item>
        <el-form-item label="账户名：">
          <el-input
            v-model="ruleForm.accountName"
            placeholder="请输入账户名"
            class="dialogWidth"
          ></el-input>
        </el-form-item>
        <el-form-item label="银行账号：">
          <el-input
            v-model="ruleForm.bankAccount"
            placeholder="请输入银行账号"
            class="dialogWidth"
          ></el-input>
        </el-form-item>
        <!-- prop="image"-->
        <el-form-item label="微信收款码：">
          <div class="upLoadPicBox" @click="modalPicTap('wechat')">
            <div class="pictrue" v-if="ruleForm.wxQrCode">
              <img :src="ruleForm.wxQrCode" />
            </div>
            <div v-else class="upLoad">
              <i class="el-icon-camera cameraIconfont" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="银行收款码：">
          <div class="upLoadPicBox" @click="modalPicTap('bank')">
            <div class="pictrue" v-if="ruleForm.bankQrCode">
              <img :src="ruleForm.bankQrCode" />
            </div>
            <div v-else class="upLoad">
              <i class="el-icon-camera cameraIconfont" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="支付宝收款码：">
          <div class="upLoadPicBox" @click="modalPicTap('alipay')">
            <div class="pictrue" v-if="ruleForm.aliQrCode">
              <img :src="ruleForm.aliQrCode" />
            </div>
            <div v-else class="upLoad">
              <i class="el-icon-camera cameraIconfont" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="联系人：">
          <div v-for="(item, index) in ruleForm.contacts" :key="index">
            <el-input
            v-model="item.name"
            placeholder="请输入姓名"
            class="dialogWidth"
          ><template slot="prepend">姓名</template></el-input>
          <el-input
            v-model="item.phone"
            placeholder="请输入电话"
            class="dialogWidth"
          ><template slot="prepend">电话</template></el-input>
          <el-input
            v-model="item.department"
            placeholder="请输入部门"
            class="dialogWidth"
          ><template slot="prepend">部门</template></el-input>
          <el-button v-if="index == 0" type="primary" @click="addContact()">添加联系人</el-button>
        </div>
        </el-form-item>
        <el-form-item label="文件：">
          <div v-for="(item, index) in ruleForm.files" :key="index">
            <el-input
            v-model="item.fileName"
            placeholder="请输入文件名称"
            class="dialogWidth"
          ><template slot="prepend">文件名称</template></el-input>
          <el-input
            v-model="item.fileUrl"
            placeholder="请输入文件链接"
            class="dialogWidth"
          ><template slot="prepend">文件链接</template></el-input>
          <el-button v-if="index == 0" type="primary" @click="addFile()">添加文件</el-button></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button
          type="primary"
          @click="editForm('ruleForm')"
          v-if="editDialogConfig.isEdit == 1"
          v-hasPermi="['admin:system:store:update']"
          >修改</el-button
        >
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          v-else
          v-hasPermi="['admin:system:store:save']"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  updateSupplier,
  addSupplier,
  getSupplierList,
  delSupplier,
  detailSupplier
} from "@/api/hehuoren";
import * as logistics from "@/api/logistics";
import { configInfo } from "@/api/systemConfig";
import Templates from "@/views/appSetting/wxAccount/wxTemplate/index";
import { Debounce } from "@/utils/validate";
export default {
  name: "shopList",
  components: { Templates },
  data() {
    return {
      constants: this.$constants,
      listPram: {
        companyName: null,
        page: 1,
        limit: this.$constants.page.limit[0]
      },
      editDialogConfig: {
        visible: false,
        title: "添加供应商",
        isEdit: 0 // 0=add 1=edit
      },
      loading: true,
      listData: { list: [], total: 0 },
      ruleForm: {
        description: "",
        accountName: "",
        aliQrCode: "",
        bankAccount: "",
        bankBranch: "",
        bankName: "",
        bankQrCode: "",
        companyName: "",
        wxQrCode: "",
        contacts: [{
			"department": "",
			"name": "",
			"phone": "",
      }],
      files: [{
        "fileName": "",
			  "fileUrl": "",
      }]
      },
    };
  },
  created() {},
  mounted() {
    this.getSupplierListFn();
  },
  methods: {
    addContact() {
      this.ruleForm.contacts.push({
			"department": "",
			"name": "",
			"phone": "",
      })
    },
    addFile() {
      this.ruleForm.files.push({
        "fileName": "",
			  "fileUrl": "",
      })
    },
    handleDelete(item) {
      let that = this;
      that.$modalSure("确定要删除该供应商吗？").then(() => {
        delSupplier(item.id).then(() => {
          that.$message.success("删除成功");
          that.getSupplierListFn();
        });
      });
    },
    addShop() {
      this.editDialogConfig.title = "添加供应商";
      this.editDialogConfig.visible = true;
      this.editDialogConfig.isEdit = 0
    },
    editShop(item) {
      detailSupplier(item.id).then(res => {
        this.editDialogConfig.title = "编辑供应商";
        this.editDialogConfig.visible = true;
        this.editDialogConfig.isEdit = 1
        this.ruleForm = res;
      })
    },
    getSupplierListFn() {
      this.loading = true;
      getSupplierList(this.listPram).then(res => {
        this.listData = res;
        this.loading = false;
      });
    },
    submitForm: Debounce(function(name) {
      addSupplier(this.ruleForm).then(async () => {
        this.$message.success("提交成功");
        this.editDialogConfig.visible = false;
        this.getSupplierListFn();
      });
    }),
    //编辑
    editForm: Debounce(function(name) {
      updateSupplier(this.ruleForm).then(async () => {
        this.$message.success("编辑成功");
        this.editDialogConfig.visible = false;
        this.getSupplierListFn();
      });
    }),
    cancel() {
      this.editDialogConfig.visible = false;
      this.ruleForm.image = "";
    },
    //上传图片
    modalPicTap(tit) {
      const _this = this;
      this.$modalUpload(
        function(img) {
          if(tit == 'wechat') {
          _this.ruleForm.wxQrCode = img[0].sattDir;

          }
          if(tit == 'bank') {
          _this.ruleForm.bankQrCode = img[0].sattDir;

          }
          if(tit == 'alipay') {
          _this.ruleForm.aliQrCode = img[0].sattDir;

          }
        },
        tit,
        "system"
      );
    },
    handlerSearch() {
      this.listPram.page = 1;
      this.getSupplierListFn(this.listPram);
    },
    handleSizeChange(val) {
      this.listPram.limit = val;
      this.getSupplierListFn(this.listPram);
    },
    handleCurrentChange(val) {
      this.listPram.page = val;
      this.getSupplierListFn(this.listPram);
    }
  }
};
</script>

<style scoped lang="scss">
.el-input-group__append,
.el-input-group__prepend {
  background-color: #1890ff !important;
  color: #fff !important;
  border-color: #1890ff !important;
  border-radius: 0 4px 4px 0;
}
.cascaderW {
  width: 350px;
}
.mapBox {
  text-align: center;
}
</style>
